<template>
    <div>
       <Search v-model="queryModel.query" @search="getOrders"></Search>
       <MyTable
       :cols="cols"
       :data="list"
       :total="total"
       :loading="queryLoading"
       v-model="queryModel"
       @change="getOrders"
       >
       <template v-slot:pay="{row:{order_pay}}">
          <el-tag :type="order_pay=='0'?'danger':'success'">
             {{order_pay=='0'?'未':'已'}}付款
          </el-tag>
       </template>
       <template v-slot:time="{row:{create_time}}">
          {{ new Date(create_time*1000).format()}}
       </template>
       <template v-slot:action="{}">
          <el-button size="mini" type="primary" @click="model={};$refs.d.show()">编辑</el-button>
          <el-button size="mini" type="success" @click="getTrandeList">查看物流</el-button>
       </template>
       </MyTable>
       <DF 
       lw="90px"
       :opts="opts" 
       v-model="model"
       title="修改地址"
       ref="d"
       ></DF>
       <MyDialog title="物流进度" ref="dia">
        <div class="box" v-for="(item,index) in tradeList" :key="index">
          <div>{{item.context}}</div>
          <p>{{item.time}}</p>
        </div>
        <div slot="footer"></div>
       </MyDialog>
    </div>
</template>

<script>
import { pageMixins } from '@/mixins/baseMixins';
import { getOrderList,getTradeInfo } from "api/orders";
import city from "uti/city";
    export default {
        mixins:[pageMixins],
        name:'orders',
        data() {
            return {
                /**
                 * 表单配置想
                 */
                opts:{
                  address:{
                    title:"省市区/县",
                    required:true,
                    tag:"cas",
                    style:'width:100%',
                    options:city,
                  },
                  detail:{
                    title:"详细地址",
                    required:true,
                    max:100,
                  }
                },
                /**
                 * 提交编辑模型
                 */
                model:{},
                /**
                 * 物流列表
                 */
                tradeList:[],
                /**
                 * 列
                 */
                cols:[
                    {
                        title:"#",
                        type:'index'
                    },
                    {
                        title:"订单编号",
                        name:"order_number",
                    },
                    {
                        title:"订单价格",
                        name:"order_price",
                    },
                    {
                        title:"是否付款",
                        slot:'pay',
                    },
                    {
                        title:"是否发货",
                        name:"is_send",
                    },
                    {
                        title:"下单时间",
                        width:180,
                        align:"center",
                        slot:"time"
                    },
                    {
                        title:"操作",
                        algn:"center",
                        slot:"action",
                        width:200
                    }
                ],
            }
        },
        created () {
            this.getOrders();
        },
        methods: {
           
            /**
             * 获取订单列表
             */
            async getOrders() {
                try {
                    this.queryLoading=true;
                    const {total,goods}=await getOrderList(this.queryModel);
                    this.list=goods;
                    this.total=total;
                } catch (error) {
                    console.log(error);
                }
                    this.queryLoading=false;
            },
             /**
             * 获取物流列表
             */
            async getTrandeList(){
              try {
                this.queryLoading=true;
                this.tradeList=await getTradeInfo();
                this.$refs.dia.show();
              } catch (error) {
                console.log(error);
              }
              this.queryLoading=false;
            },
        },
    }
</script>

<style lang="scss" scoped>
.box{
    padding-left: 20px;
    border-left: 1px solid #ccc;
    position: relative;
    padding-bottom: 20px;
    &:last-child{
        border-left: none;
    }
    &::before{
       content: "";
       display: inline-block;
       width: 10px;
       height: 10px;
       position: absolute;
       left: -5px;
       top: -5px;
       background: #ccc;
       border-radius: 50%;
    }
}
</style>